<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_新增盒子模型属性_shadow</title>
<style>
    .box1{
        width: 400px;
        height: 400px;
        background-color: orange;
        margin: 0 auto;
        margin-top: 100px;
        font-size: 40px;
        /*box-shadow写两个值:,垂直方向 水平方向*/
        box-shadow: 10px 10px ;
        /*!*box-shadow写三个值:垂直方向,水平方向,颜色*!*/
        /*box-shadow: 10px 10px blue;*/
        /*!* box-shadow写三个值:垂直方向,水平方向,阴影模糊度*!*/
        /*box-shadow: 10px 10px 20px;*/
        /*!*box-shadow写四个值垂直方向,水平方向,阴影模糊度,颜色*!*/
        /*box-shadow: 10px 10px 10px blue;*/
        /*!*box-shadow写五个值垂直方向,水平方向,阴影模糊度,阴影外延,颜色*!*/
        /*!*外延其实就是在将阴影的大小在原盒子大小的情况下增加*!*/
        /*box-shadow: 10px 10px 10px 20px blue;*/
        /*!*box-shadow写六个值垂直方向,水平方向,阴影模糊度,阴影外延,颜色,内阴影*!*/
        /*!*内阴影就是将阴影放在背景之上,内容之下的位置*!*/
        /*box-shadow: 10px 10px 10px 20px blue inset;*/
    }
</style>
</head>
<body>
<div class="box1">box-shadow</div>
</body>
</html>